<template>
	<view>
		<xk-header :headerbg="true" :back="true" title="访客记录"></xk-header>
		<!-- <view>
			<u-subsection :list="subsectionlist" mode="subsection" fontSize="16px" :current="current"
				@change="sectionChange"></u-subsection>
		</view> -->
		<block v-for="(item, index) in List" :key="index">
			<view class="carbox" @click="gotoUrl(item)">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="3">
						<view :class="item.status == '0' ? 'staus_1' : item.status == '1' ? 'staus_2' : item.status == '2' ? 'staus_3' :
								item.status == '3' ? 'staus_4' : 'staus_5'">
							<view class="stausWord">{{ item.status == '0' ? '待审核' : item.status == '1' ? '已通过' : item.status == '2' ? '已拒绝' :
								item.status == '3' ? '已到访' : item.status == '4'?'已失效' : '已取消' }}</view>
						</view>
					</u-col>
					<u-col span="9">
						<view class="title1">{{ item.receiveOrgName }}</view>
						<view class="title2">{{ item.visitorName }}</view>
						<view class="title3">{{ item.startTime }} ~ {{ item.endTime }}</view>
					</u-col>
				</u-row>
			</view>
		</block>
		<view v-if="isLoading" class="loadtext">
			<u-loading-icon mode="circle" :vertical="true" size="20" textSize="12" text="加载更多信息"
				:status="loadmoreStatus"></u-loading-icon>
		</view>
		<view v-else class="loadtext">没有更多了</view>
	</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				subsectionlist: ['到访', '接访'],
				current: 0,
				options: {},
				// 页面属性
				page: {},
				// 页面元素
				items: [],
				List: [],
				formdata: {
					phone:  this.$util.getStorage("loginInfo").app !== undefined ? this.$util.getStorage("loginInfo")?.app
					?.phone : this.$util.getStorage("loginInfo")?.wx?.phoneNo,
					pageSize: "7",
					pageNo: "1"
				},
				isAll:false,
				//上拉加载状态
				loadmoreStatus: 'loadmore',
				isLoading: false,
			}
		},
		onLoad() {},
		onShow() {
			this.getdatas()
		},
		// 下拉刷新
		onPullDownRefresh(){
			console.log('this.formdata.pageNo',this.formdata.pageNo)
			if(this.formdata.pageNo!=1){
				console.log('this.formdata.pageNo进来了',this.formdata.pageNo)
				this.formdata.pageNo = --this.formdata.pageNo;
				this.getdatas()
				this.isAll=false
			}
		},
		onReachBottom() {
			if (this.isLoading) {
				this.isAll=true
				this.loadmoreStatus = 'loading';
				this.formdata.pageNo = ++this.formdata.pageNo;
				setTimeout(() => {
					this.getdatas()
				}, 1000)
			}
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			},
			gotoUrl(item) {
				// var weburl = e.currentTarget.dataset.url;
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pagesA/visitor/visitordetail?item=' + JSON.stringify(item)
				});
			},
			getdatas() {
				this.$util.post({
					url: "wx/ob/visit/getVisitorRecord",
					data: this.formdata,
				}).then(res => {
					if(this.isAll){
						this.List=this.List.concat(res)
					}else{
						this.List=res
					}
					
					for (let i = 0; i < this.List.length; i++) {
						this.List[i].startTime = moment(this.List[i].startTime).format('YYYY-MM-DD HH:mm')
						this.List[i].endTime = moment(this.List[i].endTime).format('YYYY-MM-DD HH:mm')
					}
					//停止下拉刷新
					wx.stopPullDownRefresh()
					if (res.length < this.formdata.pageSize) {
						this.isLoading = false
						this.isAll=false
						this.loadmoreStatus = 'nomore'
					} else {
						this.isLoading = true
						this.loadmoreStatus = 'loading'
					}
				})
			},
		},
	}
</script>

<style>
	page {
		background: #F5F5F5 !important;
	}

	.container {
		background: #F5F5F5;
	}

	.carbox {
		background-color: #FFFFFF;
		border-bottom: 1px solid #F1F1F1;
		font-size: 28rpx;
		padding: 30rpx 10rpx 20rpx 10rpx;
	}

	.box1 {
		text-align: center;
	}

	.caricon {
		background: #FFFFFF;
		text-align: center;
		width: 120rpx;
		height: 120rpx;
		margin: 0px auto;
	}

	.title1 {
		font-size: 32rpx;
	}

	.title2 {
		font-size: 26rpx;
		color: #999;
		padding: 10rpx 0rpx 10rpx 0rpx;
	}

	.title3 {
		font-size: 26rpx;
		color: #999;
	}

	.loadtext {
		text-align: center;
		padding: 30rpx 0 50rpx 0;
		font-size: 24rpx;
		color: #999;
	}

	.staus_1 {
		background-color: rgb(251, 184, 125);
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		color: white;
	}

	.staus_2 {
		background-color: rgb(119, 190, 255);
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		color: white;
	}

	.staus_3 {
		background-color: rgb(227, 77, 89);
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		color: white;
	}

	.staus_4 {
		background-color: rgb(69, 214, 156);
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		color: white;
	}

	.staus_5 {
		background-color: rgb(179, 179, 179);
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		color: white;
	}

	.stausWord {
		text-align: center;
		/* margin: 0 auto; */
		/* margin-top: 300rpx; */
		padding-top: 45rpx;
	}
</style>
